<template>
  <div class="container">
    <searchNav />

    <div class="container-body">
      <van-row class="row">
        <van-col span="12" class="col">
          <span>指挥中心</span>
          -
          <span>全部指标</span>
          <div class="icon"></div>
        </van-col>
        <van-col span="6" class="col">
          全部区域
          <div class="icon"></div>
        </van-col>
        <van-col span="6" class="col">
          全部时间
          <div class="icon"></div>
        </van-col>
      </van-row>
      <!-- <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 324px"
          border
          stripe
          height="1000px"
          scrollbar-always-on
          :header-cell-style="{
            color: '#000000',
            width: '324.36px',
            height: '32.05px',
            background: 'rgba(67, 137, 243,.24)',
            fontSize: '10.5px'
          }"
        >
          <el-table-column prop="quotaName" label="指标" align="center" width="75%" />
          <el-table-column prop="district" label="区域" align="center" width="65%" />
          <el-table-column prop="time" label="时间" align="center" width="60%" />
          <el-table-column prop="value" label="指标值" align="center" width="70%" />
          <el-table-column prop="unit" label="单位" align="center" min-width="50%" />
        </el-table>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch } from 'vue'
import { onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import QuotaServe from '@/api/quota'
import searchNav from './components/searchNav.vue'
const tableData = ref([])
const route = useRoute()

onMounted(async () => {
  // selRelation()
  console.log(JSON.parse(route.query.divisionList))
})
// 进入搜索页面
const selRelation = async () => {
  try {
    await QuotaServe.selRelation({
      division: '',
      district: '',
      time: '',
      industryKey: ''
    }).then(resp => {
      tableData.value = resp.data
      // console.log('tableData', tableData.value)
    })
  } catch (error) {
    console.log(error)
  }
}
// 点击历史搜索，跳转搜索结果页
</script>
<style scoped lang="less">
.container {
  position: relative;
}
.container-body {
  position: absolute;
  top: 26.6667vw;
  width: 100%;
  z-index: 10;
  background: #f5f5f5;
  border-radius: 5.128vw 5.128vw 0px 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 20px;
  box-sizing: border-box;
  .row {
    width: 100%;
    font-weight: bold;
    font-size: 11px;
    .col {
      display: flex;
      align-items: center;
      .icon {
        width: 0;
        height: 0;
        border: 5px solid;
        border-bottom: 0;
        border-color: black transparent;
        margin-left: 5px;
      }
    }
  }
}
::deep(.el-scrollbar__bar) {
  right: 0px !important;
}
</style>
<style>
.el-table__header-wrapper {
  height: 32px !important;
}
.el-table .el-table__cell {
  padding: 0 0;
}
.el-table tr {
  font-size: 10.23px !important;
}
.table-box {
  width: 344px;
  background-color: #ffffff;
  padding-top: 10px;
  display: flex;
  justify-content: center;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: red;
  box-shadow: 1px 1px 5px 1px RGB(128, 255, 255, 0.8) inset;
  height: 30px;
}
</style>
